<template>
	<div class="union">
		<div class="i_index_title">
			<span class="index_title">福彩3D</span>
			<van-icon class="fanhui" @click="fanhui" name="arrow-left" />
		</div>
		<div class="app">
			<div class="redball">
				<div class="redball_title">
					<span class="redball_title_ball">第一个</span>
				</div>
				<ul class="ball_oul">
					<li v-for="(item,index) in one" @click="zered(item,index)" :class="item.show? 'hong':'ball_oli'">
						<span class="neizi">{{item.value}}</span>
					</li>
				</ul>
			</div>
			<div class="redball">
				<div class="redball_title">
					<span class="redball_title_ball">第二个</span>
				</div>
				<ul class="ball_oul">
					<li v-for="(item,index) in two" @click="zeblue(item,index)" :class="item.show? 'hong':'ball_oli'">
						<span class="neizi">{{item.value}}</span>
					</li>
				</ul>
			</div>
			<div class="redball">
				<div class="redball_title">
					<span class="redball_title_ball">第三个</span>
				</div>
				<ul class="ball_oul">
					<li v-for="(item,index) in three" @click="san(item,index)" :class="item.show? 'hong':'ball_oli'">
						<span class="neizi">{{item.value}}</span>
					</li>
				</ul>
			</div>
		</div>
		
		<div class="huakuai" @click="show=true">
			<div class="multiple">
				<p>倍数</p>
				<span>最大五十倍</span>
			</div>
			<div class="quantity" @click.stop>
				<van-stepper v-model="value" />
				<van-icon name="arrow" />
			</div>
			<div class="notarize1" @click.stop="tianjia">
				<span>
					加入已选
				</span>
			</div>
			<div class="notarize" @click.stop="tianjia">
				<span>
					确认
				</span>
			</div>
		</div>
		<van-action-sheet v-model="show">
			<div class="content">
				<div class="content_title">
					<div class="hong" style="margin-top: 10px;"><span class="neizi">{{sandi.length}}</span></div>
					<span style="font-weight: 600;">号码列表</span>
					<span style="margin-left: 50px; font-size: 19px;font-weight: 600;">倍数</span>
					<div style="margin-left: 10px;">
						<van-stepper v-model="value" max="50"/>
					</div>
					<div class="box" @click="show=false">
						<van-icon name="cross" />
					</div>
				</div>
				<ul class="content_oul">
					<li v-for="(item,index) in sandi">
						<div class="content_oli_ball">{{item.ballone[0]}}</div>
						<div class="content_oli_ball">{{item.balltwo[0]}}</div>
						<div class="content_oli_ball">{{item.ballthree[0]}}</div>
						<div class="ball_icon" @click="balldelete(index)"><van-icon name="delete-o" /></div>
					</li>
				</ul>
				<div class="tc_tj">
					<div class="jine">￥{{jisuan}}</div>
					<div class="qingchu" @click="qingchu()">
						<span>清除号码</span>
					</div>
					<div class="hm_tijiao" @click="goorder">
						<span>提交订单</span>
					</div>
				</div>
			</div>
		</van-action-sheet>
	</div>
</template>

<script>
	import { Toast } from 'vant';
	import { Dialog } from 'vant';
	export default{
		data(){
			return {
				show:false,
				value:1,
				one:[
					{value:'0',show:false},
					{value:'1',show:false},
					{value:'2',show:false},
					{value:'3',show:false},
					{value:'4',show:false},
					{value:'5',show:false},
					{value:'6',show:false},
					{value:'7',show:false},
					{value:'8',show:false},
					{value:'9',show:false},
				],
				two:[
					{value:'0',show:false},
					{value:'1',show:false},
					{value:'2',show:false},
					{value:'3',show:false},
					{value:'4',show:false},
					{value:'5',show:false},
					{value:'6',show:false},
					{value:'7',show:false},
					{value:'8',show:false},
					{value:'9',show:false},
				],
				three:[
					{value:'0',show:false},
					{value:'1',show:false},
					{value:'2',show:false},
					{value:'3',show:false},
					{value:'4',show:false},
					{value:'5',show:false},
					{value:'6',show:false},
					{value:'7',show:false},
					{value:'8',show:false},
					{value:'9',show:false},
				],
				oneitem:[],
				twoitem:[],
				threeitem:[],
				sandi:[]
			}
		},
		components: {
		    [Dialog.Component.name]: Dialog.Component,
		  },
		computed:{
			jisuan(){
				let aa=0
				this.sandi.forEach((item)=>{
					aa+=item.num
				})
				return aa*this.value
			}
		},
		methods:{
			fanhui(){
				this.$router.go(-1);
			},
			zered(item,index){
				let aa=[]
				this.one.forEach((int=>{
					int.show=false
				}))
				item.show=true
				aa.push(item)
				this.oneitem=aa
				console.log(this.oneitem)
			},
			zeblue(item,index){
				let aa=[]
				this.two.forEach((int=>{
					int.show=false
				}))
				item.show=true
				aa.push(item)
				this.twoitem=aa
				console.log(this.twoitem)
			},
			san(item,index){
				let aa=[]
				this.three.forEach((int=>{
					int.show=false
				}))
				item.show=true
				aa.push(item)
				this.threeitem=aa
				console.log(this.threeitem)
			},
			balldelete(index){
				console.log(index)
				this.sandi.splice(index, 1);
			},
			qingchu(){
				Dialog.confirm({
				  message: '确认清除号码？',
				})
				  .then(() => {
				    // on confirm
						this.sandi=[]
				  })
				  .catch(() => {
				    // on cancel
				  });
			},
			tianjia(){
				if(this.oneitem!=''&&this.twoitem!=''&&this.threeitem!=''){
					console.log(this.oneitem)
					let one=[]
					let two=[]
					let three=[]
					this.oneitem.forEach((item)=>{
						one.push(item.value)
					})
					this.twoitem.forEach((item)=>{
						two.push(item.value)
					})
					this.threeitem.forEach((item)=>{
						three.push(item.value)
					})
					let aa={
						ballone:one,
						balltwo:two,
						ballthree:three,
						num:2
					}
					this.sandi.push(aa)
					Toast('添加成功');
					this.show=true
					this.one.forEach((item)=>{
						item.show=false
					})
					this.two.forEach((item)=>{
						item.show=false
					})
					this.three.forEach((item)=>{
						item.show=false
					})
					this.oneitem=[]
					this.twoitem=[]
					this.threeitem=[]
					console.log(this.sandi)
				}else{
					Toast('请选择三个号码');
				}
			},
			goorder(){
				if(this.sandi!=''){
					let et=[]
					this.sandi.forEach((item)=>{
						let re={
							"buyCount": this.value,
							"ticketCode":JSON.stringify({ballone:item.ballone,balltwo:item.balltwo,ballthree:item.ballthree}),
							"buyType": 2,
						}
						et.push(re)
					})
					console.log(et)
					this.$axios.post('http://a.chuxingcai.com/prod-api/webapi/order/submit',{
							"ticketId":4,
							"couponItemId": 0,
							"items": et
					},{
						headers:{
							token:window.sessionStorage.getItem('token')
						}
					}).then((res) => {
						console.log(res.data)
						this.$router.push({path:'/order',query:res.data.data})
					})
				}else{
					Toast('请添加号码');
				}
			}
		}
	}
</script>

<style scoped>
		*{margin: 0; padding: 0;}
	.i_index_title{
		width: 100%;
		height: 50px;
		background-color: #F74A4B;
		position: relative;
	}
	.fanhui{
		position: absolute;
		top: 50%;
		transform: translate(0,-50%);
		font-size: 30px;
		color: white;
	}
	.hong{
		width: 30px;
		height: 30px;
		background-color: red;
		border-radius: 50%;
		margin: 5px;
		color: white;
		position: relative;
	}
	.lan{
		width: 30px;
		height: 30px;
		background-color: dodgerblue;
		border-radius: 50%;
		margin: 5px;
		position: relative;
	}
	.index_title{
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%,-50%);
		color: white;
	}
	.content_title{
		height: 50px;
		display: flex;
		margin: 10px;
		line-height: 50px;
		/* border: 1px solid red; */
	}
	.content_oul{
		max-height: 300px;
		/* border: 1px solid blue; */
		overflow: hidden;
		overflow: scroll;
	}
	.content_oul>li{
		height: 50px;
		border-bottom: 1px solid #EEEEEE;
		display: flex;
		position: relative;
	}
	.ball_icon{
		position: absolute;
		top: 50%;
		font-size: 18px;
		transform: translate(0,-50%);
		right: 20px;
	}
	.content_oli_ball{
		width: 30px;
		height: 30px;
		background-color: red;
		border-radius: 50%;
		color: white;
		text-align: center;
		line-height: 30px;
		margin-top: 10px;
		margin-left: 10px;
	}
	.huakuai{
		width: 100%;
		height: 50px;
		background: white;
		position: fixed;
		display: flex;
		bottom: 0;
	}
	.multiple{
		width: 100px;
		margin-left: 20px;
		/* border: 1px solid red; */
	}
	.multiple>p{
		font-size: 20px;
	}
	.multiple>span{
		font-size: 10px;
		border: 1px solid black;
	}
	.quantity{
		width: 130px;
		/* border: 1px solid red; */
		font-size: 20px;
		line-height: 50px;
	}
	.quantity>span{
		font-size: 25px;
	}
	.notarize{
		width: 70px;
		height: 30px;
		margin-top: 10px;
		margin-right: 10px;
		background-color: red;
		color: white;
		border-radius: 50px;
		text-align: center;
		line-height: 30px;
	}
	.notarize_ad{
		width: 70px;
		height: 30px;
		margin-top: 10px;
		margin-right: 10px;
		background-color: #ff9292;
		color: white;
		border-radius: 50px;
		text-align: center;
		line-height: 30px;
	}
	.redball{
		width: 95%;
		background-color: white;
		margin: 10px auto;
		border-radius: 5px;
	}
	.redball_title{
		height: 40px;
		width: 95%;
		margin: 0 auto;
		position: relative;
	}
	.redball_title_ball{
		position: absolute;
		top: 50%;
		transform: translate(0,-50%);
		color: #F74A4B;
	}
	.redball_title_haoma{
		position: absolute;
		top: 50%;
		right: 0;
		transform: translate(0,-50%);
	}
	.ball_oul{
		width: 100%;
		display: grid;
		justify-content: space-between;
		grid-template-columns: repeat(auto-fill, 45px);
	}
	.notarize1{
		width: 90px;
		height: 30px;
		margin-top: 10px;
		margin-right: 10px;
		background-color: red;
		color: white;
		border-radius: 50px;
		text-align: center;
		line-height: 30px;
	}
	.ball_oli{
		width: 30px;
		height: 30px;
		background-color: #fff;
		border-radius: 50%;
		margin: 5px;
		position: relative;
	}
	.neizi{
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%,-50%);
	}
	.tc_tj{
		width: 100%;
		height: 50px;
		display: flex;
	}
	.tc_tj>div{
		margin-top: 10px;
		height: 30px;
	}
	.jine{
		flex: 2;
		color:#F74A4B;
		/* border: 1px solid red; */
	}
	.qingchu{
		flex: 1;
		border: 1px solid #F74A4B;
		margin-left: 10px;
		margin-right: 10px;
		border-radius: 30px;
		background-color: white;
		color:#F74A4B;
		text-align: center;
		line-height: 30px;
	}
	.hm_tijiao{
		flex: 1;
		margin-left: 10px;
		margin-right: 10px;
		border-radius: 30px;
		background-color: #F74A4B;
		color:white;
		text-align: center;
		line-height: 30px;
	}
	.box{
		width: 25px;
		height: 25px;
		position: absolute;
		border-left: 1px solid #d0d0d0;
		margin-top: 10px;
		right: 15px;
		text-align: right;
		line-height: 30px;
		font-size: 18px;
		color: #d0d0d0;
	}
</style>
